<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./statics/css/index.css">
</head>

<body>
    <h1>修改书籍</h1>
    <table>
        <form>
            <tr>
                <th>书籍名称</th>
                <th><input type="text" id="bookName"></th>
            </tr>

            <tr>
                <th>作者名称</th>
                <th><input type="text" id="bookPrice"></th>
            </tr>

            <tr>
                <th>价格</th>
                <th><input type="text" id="author"></th>
            </tr>

            <tr>
                <th colspan="2">
                    <input type="button" value="保存" onclick="save()">
                    <input type="button" value="取消" onclick="cancel()">
                </th>
            </tr>
        </form>
    </table>

    <script>
        // 后端api路径
        const apiPath = "http://localhost:8000/books";

        // 保存
        function save() {
            // 获取
            const bookName = document.querySelector("#bookName");
            const bookPrice = document.querySelector("#bookPrice");
            const author = document.querySelector("#author");

            if (bookName.value.trim() !== "" && bookPrice.value.trim() !== "" && author.value.trim() !== "") {
                const book = {
                    bookName: bookName.value.trim(),
                    // 图书价格
                    bookPrice: parseFloat(bookPrice.value.trim()),
                    // 作者名称
                    author: author.value.trim()
                }

                // 加载完成后就渲染图书信息
                fetch(`${apiPath}/${id}`, {
                    method: "put", headers: { "content-type": "application/json" }, body: JSON.stringify(book)
                }).then(res => {
                    if (res.status = 200) {
                        return res.json();
                    }
                }).then(data => {
                    if (data.code === 200) {
                        location.href = "./index.html";
                    } else {
                        console.log(data.msg);
                    }
                }).catch(err => console.log(err));
            } else {
                alert("请先输入内容")
            }
        }

        // 取消
        function cancel() {
            location.href = "./index.html";
        }

        // 获取 id
        const id = new URLSearchParams(window.location.search).get("id");

        // 加载完成后就渲染图书信息
        fetch(`${apiPath}/${id}`, { method: "get" }).then(res => {
            if (res.status = 200) {
                return res.json();
            }
        }).then(data => {
            if (data.code === 200) {
                document.querySelector("#bookName").value = data.data.bookName;
                document.querySelector("#bookPrice").value = data.data.bookPrice;;
                document.querySelector("#author").value = data.data.author;;
            } else {
                console.log(data.msg);
            }

        }).catch(err => console.log(err));
    </script>
</body>

</html>